import { Component, OnInit } from '@angular/core';
import {Path} from "../../../../portal/admin/admin-breadcrumb/breadcrumb";
import {PageSubject} from "../../../../util/page-subject";
import {MsgResult} from "../../../../models/msg-result";
import {ReportDailyService} from "./report-daily.service";
import {ResponseUtil} from "../../../../util/response-util";
import {OneDialogService} from "../../../../widgets/one-dialog/one-dialog.service";
import {MsgConstants} from "../../../../constants/constants";
import {TableUtil} from "../../../../util/table-util";

declare var $;
declare var moment;

@Component({
  selector: 'app-report-daily',
  templateUrl: './report-daily.component.html',
  styleUrls: ['./report-daily.component.css']
})
export class ReportDailyComponent implements OnInit {
  config;tableDataObj;table;
  // localSites : Array<any> = [];
  constructor(
    private pageSubject : PageSubject,
    private ReportDailyService : ReportDailyService,
    private responseUtil :ResponseUtil,
    private tableUtil:TableUtil,
    private dialogService: OneDialogService,
  ) { }

  ngOnInit() {
    this.pushPage();
    this.siteButtonData();
  }

  //面包屑导航
  pushPage() {
    let path = new Path("分析报告", "");
    this.pageSubject.pushPage("空气质量日报", "", path);
  }

  //站点按钮数据
  siteButtonData(){
    this.ReportDailyService.getUserSiteData().subscribe(
      result => this.responseUtil.success(result,this.siteButtonDataResult),
      message => this.responseUtil.error(message)
    );
  }
  private siteButtonDataResult = (result: MsgResult) =>{
    if (result && result.code == MsgConstants.MSG_CODE_OK) {
      this.siteButtonDataDataTree(result.data);
    }
    if (result && result.code != MsgConstants.MSG_CODE_OK) {
      this.dialogService.info(result.message);
    }
  }
  //站点按钮
  siteButtonDataDataTree(data){
    let siteHtml = "";
    let localSite = [
      {"name":"nationalSite","className":"national","type":"national","chinese":"国控站"},
      {"name":"provinceSite","className":"province","type":"province","chinese":"省控站"},
      {"name":"smallAirSite","className":"small","type":"smallAir","chinese":"微型站"}
    ];
    $.each(localSite,function (j,siteList) {
      $.each(data,function (i,list) {
        if(list==siteList.name){
          siteHtml+='<div class="btn btn-default '+siteList.className+'" id="'+siteList.name+'" data-type="'+siteList.type+'">'+siteList.chinese+'</div>';
        }
      });
    });
    if(siteHtml){
      $(".user_site_button").html(siteHtml);
      $(".user_site_button").find(".btn:first").addClass("active");
      this.initTime();
      this.initClickEvent();
      this.tableDataObj = {"startTime":moment().subtract(1,"d").format("YYYY-MM-DD")+"+00:00:00","endTime":moment().subtract(1,"d").format("YYYY-MM-DD+HH")+":00:00","pointType": $(".user_site_button").find(".btn:first").attr("id")};
      this.tableContentData(this.tableDataObj);
    }else{
      $(".one-content").html("暂无数据");
    }

  };

  //表格数据
  tableContentData(obj){
    this.ReportDailyService.getReportDailyData(obj).subscribe(
      result => this.responseUtil.success(result,this.tableContentDataResult),
      message => this.responseUtil.error(message)
    );
  }
  private tableContentDataResult = (result: MsgResult) =>{
    if (result && result.code == MsgConstants.MSG_CODE_OK) {
      $(".one-content h2>span:nth-child(1)").html(result.data.regionName);
      this.tableContentDataTree(result.data.dataList);
    }
    if (result && result.code != MsgConstants.MSG_CODE_OK) {
      this.dialogService.info(result.message);
    }
  }
  private tableContentDataTree(data){
      console.log("表格数据加载成功");
      $(".one-data-loadState").hide();
      this.changeTitleTime();
      this.tableContent(data);

  }

  //表格
  tableContent(datas){

    $(".one-table-area").html('<table class="table table-striped" id="airQualityDailyTable"></table>');
    this.table=this.tableUtil.load("airQualityDailyTable",{
      columns: [
        {
          field: 'index',
          title: '排名',
          width:35
        }, {
          field: 'siteName',
          title: '站点名称',
          align:"left",
          halign:"center",
          width:90
        }, {
          field: 'monitorTime',
          title: '时间',
          width:110,
          align:"left",
          halign:"center"
        }, {
          field: 'pm10',
          title: 'PM10',
          width:50,
          align:"right",
          halign:"center"
        }, {
          field: 'pm25',
          title: 'PM2.5',
          width:50,
          align:"right",
          halign:"center"
        }, {
          field: 'so2',
          title: 'SO<sub>2</sub>',
          width:50,
          align:"right",
          halign:"center"
        }, {
          field: 'no2',
          title: 'NO<sub>2</sub>',
          width:50,
          align:"right",
          halign:"center"
        }, {
          field: 'co',
          title: 'CO',
          width:50,
          align:"right",
          halign:"center"
        }, {
          field: 'o3',
          title: 'O<sub>3</sub>',
          width:50,
          align:"right",
          halign:"center"
        }, {
          field: 'compositeValue',
          title: '综合指数',
          width:60,
          align:"right",
          halign:"center"
        }, {
          field: 'aqi',
          title: 'AQI',
          width:50,
          align:"right",
          halign:"center"
        }, {
          field: 'pollutant',
          title: '首要污染物',
          width:110,
          align:"left",
          halign:"center"
        }, {
          field: 'aqiLevelType',
          title: '空气质量类型',
          width:90,
          align:"left",
          halign:"center"
        }
      ],
      data:datas,
      striped :true,
      undefinedText : " ",
      height:$(window.innerHeight)[0]-250
    });
  }

  //初始化时间插件
  initTime(){
    let timeData = moment().subtract(1,"d").format("YYYY-MM-DD HH")+":00"
    this.config = {
      "singleDatePicker": true,
      "parentEl":$(".wrapper"),
      "locale": {
        "format": "YYYY-MM-DD",
        "customRangeLabel": "Custom",
        "weekLabel": "W",
        "daysOfWeek": [
          "日",
          "一",
          "二",
          "三",
          "四",
          "五",
          "六"
        ],
        "monthNames": [
          "一月",
          "二月",
          "三",
          "四月",
          "五月",
          "六月",
          "七月",
          "八月",
          "九月",
          "十月",
          "十一月",
          "十二月"
        ],
        "firstDay": 1
      },
      "startDate": timeData,
      "endDate":timeData,
      "maxDate": timeData
    };
    $('#dailyDate').daterangepicker(this.config);
    $(".one-data-loadState").show();
  }


  //更改标题时间
  changeTitleTime(){
  let date = $('#dailyDate').val();
  let list = date.split("-");
  $(".one-content h2>span:nth-child(2)").html(list[1]);
  $(".one-content h2>span:nth-child(3)").html(list[2]);
}

  //点击站点类型
  clickSiteType(pointType){
    let startTime = $('#dailyDate').val()+"+00:00:00";
    let endTime = startTime;
    let obj = {"startTime":startTime,"pointType":pointType,"endTime":endTime};
  }

//时间改变 更改开始日期与结束日期
  dateChange(){
    $(".one-table-area").html('<table class="table table-striped" id="airQualityDailyTable"></table>');
    $(".table-data-loadState").show();
    let pointType=$(".site").find(".active").attr("id");
    let startTime = $('#dailyDate').val()+" 00:00:00";
    let  changeData= {"startTime":startTime,"endTime":startTime,"pointType":pointType};
    this.changeTitleTime();
    this.tableContentData(changeData);
  }

  //点击选择X站
  initClickEvent(){
    $(".search").click(function(){
      this.dateChange();
    }.bind(this));
    $(".national").click(function(e){
      $(e.target).addClass("active").siblings(".active").removeClass("active");
      this.clickSiteType("nationalPoint");
    }.bind(this));
    $(".province").click(function(e){
      $(e.target).addClass("active").siblings(".active").removeClass("active");
      this.clickSiteType("provincePoint");
    }.bind(this));
    $(".small").click(function(e){
      $(e.target).addClass("active").siblings(".active").removeClass("active");
      this.clickSiteType("smallAirPoint");
    }.bind(this));

    //添加导出按钮
    $(function(){
      $(".one-btn-data-type").append("<div class='pull-right'><button class='btn btn-success export'>导出为Excel</button></div>");
      $(".export").click(function(){
        let pointType=$(".site").find(".active").attr("id");
        let startTime = $('#dailyDate').val()+" 00:00:00";
        let endTime = startTime;
        let objString = "endTime="+endTime+"&startTime="+startTime+"&pointType="+pointType;
        let baseUrl = location.protocol + "//" + location.host + "/";
        console.log(baseUrl+"api/exportExcel/airQualityDayReportExportExcel?format=json&"+objString);
        window.location.href = baseUrl+"api/exportExcel/airQualityDayReportExportExcel?format=json&"+objString;
      })
    });

  }
}
